<template>
    <page-wrap scrollType="bs" :initBs="initBs" :load="loadData">
        <template v-slot:RollingTop>
            <TimeChange @select="onSelectTimeChange"></TimeChange>
        </template>
        <template v-slot:extension>
            <div class="performance-container-select">
                <div class="select-item" @click="sendWaiterShow = true">
                    {{ sendWaiterObj.text }}
                    <div class="select-item-icon"></div>
                </div>
                <div class="select-item" @click="tableShow = true">
                    {{ tableObj.text }}
                    <div class="select-item-icon"></div>
                </div>
            </div>
        </template>

        <div class="abnormal-container">
            <div class="abnormal-container-main">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了">
                    <div class="abnormal-main-item" v-for="(item, index) in itemInfo.AbnormalConsume" :key="index">
                        <div class="send-title-row">
                            <div class="send-title">赠送人：{{ item.giftUser }}</div>
                            <div class="send-type">{{ item.state }}</div>
                        </div>
                        <div class="send-content-box">
                            <div class="send-content-row">
                                <span class="send-content-label">赠送时间：</span>
                                <span class="send-content-value">{{ item.giftTime }}</span>
                            </div>
                            <div class="send-content-row table-name">
                                {{ item.roomName }}
                            </div>
                            <div class="send-content-row">
                                <span class="send-content-label">赠送商品：</span>
                                <span class="send-content-value">{{ item.goodsName }}</span>
                                <span class="send-content-value">（￥{{ item.salePrice }}
                                    x{{ item.orderQty }}{{ item.uomName }}）</span>
                            </div>
                            <div class="send-content-row">
                                <span class="send-content-label">赠送金额：</span>
                                <span class="send-content-value color-FFAA00">￥{{ item.salePrice * item.orderQty }}</span>
                            </div>
                            <div class="send-content-row">
                                <span class="send-content-label">赠送备注：</span>
                                <span class="send-content-value">{{ item.remark }}</span>
                            </div>
                        </div>
                    </div>
                </van-list>
            </div>
        </div>
    </page-wrap>
    <z-picker v-model:show="sendWaiterShow" :columns="waiterColumns" title="赠送人"
        @confirm="onWaiterConfirm($event, 'department')" />
    <z-picker v-model:show="tableShow" :columns="tableColumns" title="桌台" @confirm="onTableConfirm($event, 'department')" />
</template>
  
<script setup>
import dayjs from 'dayjs'
import Api from '@/api'
import { transformWorkTime } from '@/utils/chenhao'
import useAppStore from '@/store/app'
const appStore = useAppStore()

// 赠送人 选项组
const waiterColumns = ref([{ text: "全部", value: "" }])
const get_waiter_options = (params) => {
    // 获取服务员信息
    Api.Common.AppObjProcess.Do({
        functionName: 'getWaiterList',
        contentData: {}
    })
        .then(res => {
            console.log('赠送人 选项组 res:>> ', res);
            const DepotList = res.result
            // 改造数组 添加picker需要的text和value
            let modifiedObjArr = DepotList.map(obj => {
                return { ...obj, text: obj.userName, value: obj.userCode }
            })
            Array.prototype.push.apply(waiterColumns.value, modifiedObjArr)
        })
        .catch(err => {
        })
}
get_waiter_options()

// -----------------赠送人弹框---------------
let sendWaiterObj = ref({ text: '赠送人' })
const sendWaiterShow = ref(false)
// 弹窗确定按钮
const onWaiterConfirm = function (ev, type) {
    sendWaiterObj.value = ev.selectedOptions[0]
    const opt = ev.selectedOptions ? ev.selectedOptions[0] : null
    postForm.userName = opt.text
    postForm.giftUser = opt.value
    console.log('postForm :>> ', postForm);
    sendWaiterShow.value = false
    loadData(true)
}

// 桌台 选项组
const tableColumns = ref([{ text: "全部", value: "" }])
const get_table_options = (params) => {
    // 获取服务员信息
    Api.Common.AppObjProcess.Do({
        functionName: 'getRoomInfoNew',
        contentData: {}
    })
        .then(res => {
            console.log('桌台 选项组 res:>> ', res);
            const DepotList = res.result
            // 改造数组 添加picker需要的text和value
            let modifiedObjArr = DepotList.map(obj => {
                return { ...obj, text: obj.roomName, value: obj.roomCode }
            })
            Array.prototype.push.apply(tableColumns.value, modifiedObjArr)
        })
        .catch(err => {
        })
}
get_table_options()
// -----------------桌号弹框---------------
let tableObj = ref({ text: '桌号' })
const tableShow = ref(false)
// 弹窗确定按钮
const onTableConfirm = function (ev, type) {
    tableObj.value = ev.selectedOptions[0]
    const opt = ev.selectedOptions ? ev.selectedOptions[0] : null
    postForm.tableName = opt.text
    postForm.roomCode = opt.value
    console.log('postForm :>> ', postForm);
    tableShow.value = false
    loadData(true)
}


const itemInfo = ref({
    abnormalAmt: '',
    abnormalCount: '',
    AbnormalConsume: []
})
// 表单
const postForm = reactive({
    beginTime: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[0],
    endTime: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[1],
    pageIndex: 1,
    pageSize: 15
})
// -----------------------------------------------时间筛选-----------------------------------------------------
const onSelectTimeChange = (startTime, endTime) => {
    postForm.beginTime = startTime
    postForm.endTime = endTime
    loadData(true)
}
//---------------------------------------------------------------------------保留两位小数--------------------------------------------------
function formatNumber(num) {
    if (num) {
        return num.toFixed(2)
    } else {
        return 0
    }
}
// -------------------------------------------------------加载  下拉刷新---------------------------------------------------------
const loading = ref(false)
const finished = ref(false)
const initBs = ref(0)
const loadData = async function (refresh = false) {
    if (refresh === true) {
        postForm.pageIndex = 1
        itemInfo.value.AbnormalConsume = []
        finished.value = false
    }
    loading.value = true
    const resp = await Api.Common.AppObjProcess.Do({
        functionName: 'GetGiftRecordList',
        contentData: postForm
    })
    const nowList = resp.result
    console.log('获取列表 res:>> ', resp.result);
    if (refresh === true) {
        if (nowList) {
            if (nowList && nowList.length !== postForm.pageSize) {
                finished.value = true
            }
        } else {
            finished.value = true
        }
    }
    Array.prototype.push.apply(
        itemInfo.value.AbnormalConsume,
        nowList
    )

    if (nowList && nowList.length > 0) {
        postForm.pageIndex++
    } else {
        finished.value = true
    }
    loading.value = false
    if (refresh === true) {
        initBs.value++
    }
}
// -----------------------------------------------------初始化------------------------------------------------------
const onInit = function () {

    loadData(true)
}
onInit()
</script>
  
<style scoped lang="scss">
.performance-container-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #222226;
    padding: 10px 12px;
    margin: 0px 0 10px;

    .select-item {
        width: 170px;
        position: relative;
        border: 1px solid #999999;
        border-radius: 4px;
        line-height: 14px;
        padding: 8px 0px 8px 11px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #cccccc;

        .select-item-icon {
            position: absolute;
            right: 12px;
            top: 13px;
            width: 11px;
            height: 6px;
            background-image: url('@/assets/svg/common/v_triangle_bottom_white.svg');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
        }
    }
}

.abnormal-container {
    .abnormal-container-main {
        padding: 0 12px;

        .abnormal-main-item {
            background: #28282e;
            border-radius: 8px;
            margin-bottom: 10px;

            .send-title-row {
                position: relative;
                padding: 17px 12px;
                border-bottom: 1px solid #383840;

                .send-title {
                    font-size: 18px;
                    color: #FFFFFF;
                }

                .send-type {
                    position: absolute;
                    width: 60px;
                    height: 20px;
                    background: #383840;
                    border-radius: 0px 8px 0px 8px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 13px;
                    color: #999999;
                    text-align: center;
                    top: 0;
                    right: 0;
                }
            }

            .send-content-box {
                padding: 11px 24px;

                .send-content-row {
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 14px;
                    margin-bottom: 12px;

                    .send-content-label {
                        color: #CCCCCC;
                    }

                    .send-content-value {
                        color: #FFFFFF;
                    }
                }

                .table-name {
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 18px;
                    color: #FFFFFF;
                }

            }

        }
    }
}

.color-FFFFFF {
    color: #FFFFFF;
}

.color-CCCCCC {
    color: #CCCCCC;
}

.color-FFAA00 {
    color: #FFAA00 !important;
}
</style>
  